<template>
	<!-- 购物车 -->
	<view class="content">
		<!-- 购物车 -->
		<view class="shoop">
			<!-- 非空购物车 -->
			<view v-if="lengths" class="shoop_you">
				<!-- 店铺 -->
				<view class="shoop_you_dianpu">
					<!-- 二级多选框 -->
					<!-- <view class="shoop_you_dianpu_erji">
						<checkbox-group @change="boxs"  class="shoop_you_lab">
							<label>
								<checkbox style="display: none;" value="1"></checkbox>
								<view class="shoop_you_dianpu_erjiimg">
									<image style="width:100%;height:100%" mode="widthFix" v-if="show" src="http://localhost:3000/img/shop1.png"></image>
									<image style="width:100%;height:100%" mode="widthFix" v-else src="http://localhost:3000/img/shop7.png"></image>
								</view>
							</label>
						</checkbox-group>
						<text class="shoop_you_dianpu_erji_title">云水谣旗舰店</text>
					</view> -->
					<!-- 店铺的商品列表 -->
					<view v-for="(item,index) of shooplist" :key="item.goods" class="shoop_you_dianpu_list">
						<!-- 三级多选框 -->
						<view class="shoop_you_dianpu_sanji">
							<checkbox-group @click="checkeds(index)" @change="boxs"  class="shoop_you_lab">
								<label>
									<checkbox :checked="item.check" style="display: none;" :value="item.goods_id"></checkbox>
									<view class="shoop_you_dianpu_erjiimg">
										<image style="width:100%;height:100%" mode="widthFix" v-if="selectshoopid[index].check" src="http://localhost:3000/img/shop7.png"></image>
										<image style="width:100%;height:100%" mode="widthFix" v-else src="http://localhost:3000/img/shop1.png"></image>
									</view>
								</label>
							</checkbox-group>
						</view>
						<!-- 商品图片 -->
						<view class="shoop_you_list_img">
							<image style="width: 100%;" mode="widthFix" :src="particularsimg[index].pics_big"></image>
						</view>
						<!-- 商品详细信息 -->
						<view class="shoop_you_list_content">
							<text class="shoop_you_list_title">{{particulars[index].goods_name}}</text>
							<view class="danhang_price">
								<text class="shoop_you_list_prict">￥{{particulars[index].goods_price}}</text>
								<text class="shoop_you_list_params">{{item.goods_params}}</text>
							</view>
							<view class="shoop_you_list_count">
								<view class="shoop_you_list_counttab">
									<view class="dianp_price_jian" @click="jian(index,shooplist[index].goods_count)">
										<image style="width: 100%;" mode="widthFix" src="http://localhost:3000/img/shop6.png"></image>
									</view>
									<text class="dianp_price_count">{{item.goods_count}}</text>
									<view class="dianp_price_jia" @click="jia(index,shooplist[index].goods_count)">
										<image style="width: 100%;" mode="widthFix" src="http://localhost:3000/img/shop4.png"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
					
			</view>
			<!-- 空购物车 -->
			<view v-else class="shoop_kong">
				<view class="shoop_kong_img">
					<image class="shoop_kong_back" mode="widthFix" src="http://localhost:3000/images/ks1.png"></image>
				</view>
				<view class="shoop_kong_button">
					<text class="shoop_kong_text">购物车还是空的，赶紧来挑选好货吧</text>
					<text class="shoop_kong_but" @click="homes">去逛逛</text>
				</view>
			</view>
		</view>
		
		<!-- 更多推荐 -->
		<index-list>
			<!-- 标题 -->
			<view class="tuijian">
				<text class="tuijian_1"></text>
				<text class="tuijian_2"></text>
				<text class="tjtitle">更多推荐</text>
				<text class="tuijian_2"></text>
				<text class="tuijian_1"></text>
			</view>			
			<!-- 商品列表 -->
		</index-list>
		<!-- 底部空出来的区域 -->
		<view style="width: 100%;height: 1rpx; margin-bottom: 90rpx;"></view>
		<!-- 全选 提交订单 -->
		<view v-if="shooplist.length>0" class="submits">
			<view class="submits_checks">
				<checkbox-group @change="boxsall" class="shoop_you_labs">
					<label class="labelbut">
						<checkbox style="display: none;" value="all"></checkbox>
						<view class="shoop_you_dianpu_erjiimg">
							<image style="width:100%;height:100%" mode="widthFix" v-if="isshow" src="http://localhost:3000/img/shop7.png"></image>
							<image style="width:100%;height:100%" mode="widthFix" v-else src="http://localhost:3000/img/shop1.png"></image>
						</view>
						<text class="shoop_you_dianpu_erji_title">全选</text>
					</label>
				</checkbox-group>
			</view>
			<view class="submits_pricts">
				<text class="submits_pricts_sum">共{{sums}}件，</text>
				<text class="submits_pricts_heji">合计：</text>
				<text class="submits_pricts_count">￥{{prices}}</text>
				<text class="submits_pricts_but" @click="confirmorder">提交订单</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 多选框默认选中
				indexs:'',
				// 购物车是否为空
				lengths:true,
				// 用户id
				user_id:'',
				// 购物车列表
				shooplist:[],
				// 商品详情列表
				particulars:[],
				// 图片
				particularsimg:[],
				// 选中的商品id，checked
				selectshoopid:[],
				// 全选按钮
				isshow:false,
				// 总价格
				prices:0.0,
				// 总共几件
				sums:0,
				// 选中商品的id
				goodslistid:[]
			}
		},
		onLoad() {
			this.getuserinfo()
		},
		methods:{
			// 获取当前用户
			getuserinfo(){
				uni.getStorage({
					key:"user",
					success:(res)=>{
						this.user_id=JSON.parse(res.data).user_id
						// this.getshooplist(this.user_id)
					}
				})
			},
			// 获取商品详情
			getparticulars(query){
				uni.request({
					url:"http://localhost:3001/goods_id",
					data:{
						id:query
					},
					method:"GET",
					success: (res) => {
						this.particulars.push(res.data.data[0])
						console.log(this.particulars)
					}
				})
			},
			// 获取商品列表的图片地址
			getshoopimg(shooplist){
				
				uni.request({
					url:"http://localhost:3001/goods_img",
					data:{id:shooplist},
					method:"GET",
					success: (res) => {
						this.particularsimg.push(res.data.data[0])
					}
				})
			},
			// 获取购物车列表
			getshooplist(user_id){
				console.log("get shopping list .... ")
				uni.request({
					url:"http://localhost:3001/getshooplist",
					data:{
						user_id:user_id
					},
					method:"GET",
					success: (res) => {
						console.log("res.data.data")
						console.log(res.data.data)
						if(res.data.data.length<1){
							// 购物车为空
							this.lengths=false
						}else{
							this.lengths=true
							// 购物车不为空
							this.shooplist=res.data.data
							this.shooplist.forEach(item=>{
								// item.check=false
								this.getparticulars(item.goods_id)
								this.getshoopimg(item.goods_id)
								this.selectshoopid.push({check:false})
							})
						}
					}
				})
			},
			// 点击check,三级
			boxs(val){
				
			},
			// 点击勾选按钮,判断是否被勾选
			checkeds(index){
				this.selectshoopid[index].check=!this.selectshoopid[index].check
				if(this.selectshoopid[index].check){
					console.log(this.selectshoopid[index].check,'勾选')
					
					// 已选中商品,计算价格
				}else{
					console.log(this.selectshoopid[index].check,'未勾选')
					
				}
				this.pricescount
				
				
			},
			// 减少数量
			jian(index,count){
				if(count>1){
					count--
					this.shoopedit(index,count)
					this.shooplist[index].goods_count=count
				}
			},
			// 增加数量
			jia(index,count){
				count++
				this.shoopedit(index,count)
				this.shooplist[index].goods_count=count
			},
			// 修改商品的数量
			shoopedit(index,count){
				// console.log(count)
				uni.request({
					url:"http://localhost:3001/getshoopexit",
					data:{
						user_id:this.shooplist[index].user_id,
						goods_id:this.shooplist[index].goods_id,
						goods_count:count
					},
					success: (res) => {
						console.log(res)
					}
				})
			},
			// 点击check,一级
			boxsall(val){
				// console.log(val.detail.value)
				if(val.detail.value.length){
					this.isshow=true
					this.selectshoopid.forEach(item=>{
						item.check=true
					})
				}else{
					this.isshow=false
					this.selectshoopid.forEach(item=>{
						item.check=false
					})
				}
				this.prices
			},
			// 点击去逛逛按钮,去往首页
			homes(){
				uni.switchTab({
					url:"../index/index"
				})
			},
			// 点击提交订单,进入确认订单页面
			confirmorder(){
				uni.navigateTo({
					url:"./confirmorder"
				})
			}
		},
		computed:{
			// 计算价格
			pricescount(){
				var sum=0;
				var check=0;
				
				this.selectshoopid.forEach((item,index)=>{
					if(item.check){
						check++
						sum+=this.shooplist[index].goods_count*this.particulars[index].goods_price
						
					}else{
					}
				})
				this.sums=check
				// console.log(this.goodslistid)
				if(this.selectshoopid.length==check){
					this.isshow=true
					this.sums=check
				}else{
					this.isshow=false
				}
				this.prices=sum
				
				for(var i=0;i<this.selectshoopid.length;i++){
					if(this.selectshoopid[i].check){
						this.goodslistid.push({
							user_id:this.shooplist[i].user_id,
							goods_id:this.shooplist[i].goods_id
						})
					}else{
						this.goodslistid.splice(i,1)
						i--
					}
				}
				// console.log(this.goodslistid)
			}
		}
	}
</script>

<style>
	page{
		height: 100%;
		width: 750rpx;
		background-color: #f3f3f3;
	}
	image{
		vertical-align: middle;
		display: block;
	}
	.content{
		width: 100%;
		height: 100%;
	}
	.shoop_you_dianpu{
		margin-bottom: 20rpx;
		/* background-color: #fff; */
		border-radius: 10rpx;
		/* padding:20rpx; */
		margin: 20rpx;
	}
	.shoop_you_dianpu_erji{
		display: flex;
		align-items: center;
		margin-bottom: 26rpx;
	}
	.shoop_you_dianpu_erjiimg{
		display: flex;
	}
	.shoop_you_lab{
		width: 34rpx;
		display: block;
		margin-right: 10rpx;
	}
	.shoop_you_dianpu_erji_title{
		font-size: 20rpx;
		font-weight: 500;
		color: #000000;
		display: block;
	}
	
	.shoop_you_dianpu_list{
		display: flex;
		height: 170rpx;
		align-items: center;
		background-color: #FFFFFF;
		padding: 20rpx;
		margin: 10rpx 0;
	}
	.shoop_you_list_img{
		width: 164rpx;
		margin: 0 10rpx;
	}
	.shoop_you_list_content{
		flex:1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		white-space:nowrap;
		Overflow:hidden;
		text-overflow:ellipsis;
	}
	.shoop_you_list_title{
		font-size: 22rpx;
		white-space:nowrap;
		Overflow:hidden;
		text-overflow:ellipsis;
	}
	.danhang_price{
		flex: 1;
		margin: 10rpx 0;
		width: 400rpx;
		
		white-space:nowrap;
		Overflow:hidden;
		text-overflow:ellipsis;
	}
	.shoop_you_list_prict{
		font-size: 20rpx;
		color: red;
		/* padding: 10rpx 0; */
	}
	.shoop_you_list_params{
		font-size: 20rpx;
		color: #999;
		/* padding: 10rpx 0; */
		margin-left: 10rpx;
	}
	.shoop_you_list_count{
		display: flex;
		justify-content: flex-end;
	}
	.shoop_you_list_counttab{
		border-radius: 30rpx;
		border:2rpx solid #eee;
		padding: 6rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.shoop_kong{
		width: 750rpx;
	}
	.shoop_kong_img{
		width: 100%;
	}
	.shoop_kong_back{
		width:100%;
	}
	.shoop_kong_button{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.shoop_kong_text{
		font-size: 18rpx;
		margin: 20rpx 0;
		color: #999;
	}
	.shoop_kong_but{
		background-color: #eb2836;
		font-size: 24rpx;
		color: #FFFFFF;
		padding: 8rpx 48rpx;
		border-radius: 30rpx;
		margin-bottom: 100rpx;
	}
	
	
	.dianp_price_jian{
		width: 40rpx;
	}
	.dianp_price_count{
		margin:0 36rpx;
		font-size: 18rpx;
		color: #000000;
	}
	.dianp_price_jia{
		width: 40rpx;
	}
	
	.tuijian{
		font-size: 26rpx;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}
	text[class^="tuijian"]{
		border-radius: 50%;
		padding: 6rpx;
	}
	.tjtitle{
		background-color:#f3f3f3 ;
		margin: 0 20rpx;
	}
	.tuijian_1{
		background-color:#c81b21;
	}
	.tuijian_2{
		background-color: #df868c;
	}
	
	.submits{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		border-top: 2rpx solid #eee;
		background-color: #FFFFFF;
		padding: 0 14rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
	}
	.submits_checks{
		/* width: ; */
	}
	.shoop_you_labs{
		display: block;
	}
	.shoop_you_dianpu_erjiimg{
		width: 34rpx;
		margin-right: 10rpx;
	}
	.labelbut{
		display: flex;
		align-items: center;
	}
	.submits_pricts{
		display: flex;
		align-items: center;
	}
	.submits_pricts_sum{
		font-size: 20rpx;
		color: #afafaf;
	}
	.submits_pricts_heji{
		font-size: 24rpx;
		font-weight: 400;
	}
	.submits_pricts_count{
		font-size: 28rpx;
		color: red;
		font-weight: 600;
	}
	.submits_pricts_but{
		background-color: #ef3646;
		font-size: 24rpx;
		margin-left: 14rpx;
		color: #FFFFFF;
		border-radius: 30rpx;
		padding: 10rpx 24rpx;
	}
</style>
